<template>
    <el-container>
        <el-aside width="50%">
            <el-container>
                <el-header>
                    <div class="left-panel">
                        <el-button type="primary" icon="el-icon-plus" @click="module_add"></el-button>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <scTable ref="moduleTable" :apiObj="module.apiObj" :params="_moduleParam" row-key="id" @current-change="currentChange" stripe highlightCurrentRow>
                        <sc-table-column label="序号" type="index" width="65"></sc-table-column>
                        <el-table-column label="模块名称" prop="moduleName" min-width="100"></el-table-column>
                        <el-table-column label="表前缀" prop="tablePrefix" width="100"></el-table-column>
                        <el-table-column label="创建日期" prop="createTime" width="180" sortable></el-table-column>
                        <el-table-column label="操作" fixed="right" width="150">
                            <template #default="scope">
                                <el-button-group>
                                    <el-button type="info" @click.stop="module_show(scope.row, scope.$index)" size="small" icon="el-icon-view"></el-button>
                                    <el-button type="primary" @click.stop="module_edit(scope.row, scope.$index)" size="small" icon="el-icon-edit"></el-button>
                                    <el-popconfirm title="确定删除吗？" @confirm="module_del(scope.row, scope.$index)">
                                        <template #reference>
                                            <el-button type="danger" size="small" icon="el-icon-delete" @click.stop></el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </scTable>
                </el-main>
            </el-container>
        </el-aside>
        <el-container>
            <el-header>
                <div class="left-panel">
                    <el-button type="primary" icon="el-icon-plus" @click="table_add" :disabled="selection === undefined"></el-button>
                </div>
            </el-header>
            <el-main class="nopadding">
                <scTable ref="tableForm" :apiObj="table.apiObj" :params="tableParam" row-key="id" stripe>
                    <sc-table-column label="序号" type="index" width="65"></sc-table-column>
                    <el-table-column label="表名称" prop="tableName" min-width="150" :formatter="formatter"></el-table-column>
                    <el-table-column label="表注释" prop="tableComment" width="100"></el-table-column>
                    <el-table-column label="注册时间" prop="createTime" width="180" sortable></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template #default="scope">
                            <el-button-group>
                                <el-button type="primary" @click="openDrawer(scope.row, scope.$index)" size="small" icon="el-icon-setting"></el-button>
                                <el-button type="info" @click.stop="table_show(scope.row, scope.$index)" size="small" icon="el-icon-view"></el-button>
                                <el-button type="primary" @click.stop="table_edit(scope.row, scope.$index)" size="small" icon="el-icon-edit"></el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                    <template #reference>
                                        <el-button type="danger" size="small" icon="el-icon-delete" @click.stop></el-button>
                                    </template>
                                </el-popconfirm>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>

    <module-dialog v-if="dialog.moduleSave" ref="moduleDialog" @success="handleModuleSaveSuccess" @closed="dialog.moduleSave=false"></module-dialog>
    <table-dialog v-if="dialog.tableSave" ref="tableDialog" @success="handleTableSaveSuccess" @closed="dialog.moduleSave=false"></table-dialog>

    <el-drawer v-model="drawer.table" title="表字段" direction="rtl" size="70%" destroy-on-close @closed="drawer.table=false">
        <table-column :projectId="drawer.projectId" :dbId="drawer.dbId" :dbType="drawer.dbType" :moduleId="drawer.moduleId" :tableId="drawer.tableId"/>
    </el-drawer>
</template>

<script>
import moduleDialog from './module'
import tableDialog from './table'
import tableColumn from './table-column-list'

export default {
    name: 'tableField',
    components: {
        moduleDialog,
        tableDialog,
        tableColumn
    },
    props: {
        projectId: {type: [String, Number], required: true},
        dbId: {type: [String, Number], required: true},
        dbType: {type: [String, Number], required: true},
    },
    data() {
        return {
            module: {
                apiObj: this.$API.design.module
            },
            table: {
                apiObj: this.$API.design.table
            },
            selection: undefined,
            tableParam: {},
            dialog: {
                moduleSave: false,
                tableSave: false
            },
            drawer: {
                table: false,
                projectId: null,
                dbId: null,
                dbType: null,
                moduleId: null,
                tableId: null
            }
        }
    },
    computed: {
        _moduleParam() {
            return {
                projectId: this.projectId,
                dbId: this.dbId
            }
        }
    },
    methods: {
        //添加
        module_add() {
            this.dialog.moduleSave = true
            this.$nextTick(() => {
                this.$refs.moduleDialog.open().setData(this._moduleParam)
            })
        },
        //编辑
        module_edit(row) {
            this.dialog.moduleSave = true
            this.$nextTick(() => {
                this.$refs.moduleDialog.open('edit').setData(row)
            })
        },
        //查看
        module_show(row) {
            this.dialog.moduleSave = true
            this.$nextTick(() => {
                this.$refs.moduleDialog.open('show').setData(row)
            })
        },
        //删除
        async module_del(row) {
            const res = await this.$API.design.module.delete(row.id);
            if (res.code === 200) {
                this.$refs.moduleTable.refresh()
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //本地更新数据
        handleModuleSaveSuccess(data, mode) {
            if (mode === 'add') {
                this.$refs.moduleTable.refresh()
            } else if (mode === 'edit') {
                this.$refs.moduleTable.refresh()
            }
        },
        //表格选择后回调事件
        currentChange(selection) {
            this.$refs.tableForm.tableData = []
            this.selection = selection
            this.rowClick(selection)
        },
        rowClick(row) {
            if (this.tableParam.moduleId !== row.id) {
                this.tableParam.projectId = row.projectId
                this.tableParam.dbId = row.dbId
                this.tableParam.moduleId = row.id
                this.$refs.tableForm.reload(this.tableParam)
            }
        },
        //添加
        table_add() {
            this.dialog.tableSave = true
            this.$nextTick(() => {
                this.$refs.tableDialog.open().setData(this.assembleTablePrefix(this.tableParam))
            })
        },
        //编辑
        table_edit(row) {
            this.dialog.tableSave = true
            this.$nextTick(() => {
                this.$refs.tableDialog.open('edit').setData(this.assembleTablePrefix(row))
            })
        },
        //查看
        table_show(row) {
            this.dialog.tableSave = true
            this.$nextTick(() => {
                this.$refs.tableDialog.open('show').setData(this.assembleTablePrefix(row))
            })
        },
        //删除
        async table_del(row) {
            const res = await this.$API.design.table.delete(row.id);
            if (res.code === 200) {
                this.$refs.tableForm.refresh()
                this.$message.success("删除成功")
            } else {
                await this.$alert(res.msg, "提示", {type: 'error'})
            }
        },
        //本地更新数据
        handleTableSaveSuccess(data, mode) {
            if (mode === 'add') {
                this.$refs.tableForm.refresh()
            } else if (mode === 'edit') {
                this.$refs.tableForm.refresh()
            }
        },
        openDrawer(row) {
            this.drawer.projectId = row.projectId
            this.drawer.dbId = row.dbId
            this.drawer.moduleId = row.moduleId
            this.drawer.tableId = row.id
            this.drawer.table = true
            this.drawer.dbType = this.dbType
        },
        assembleTablePrefix(params) {
            const data = {tablePrefix: this.selection.tablePrefix}
            return Object.assign(data, params)
        },
        formatter(row) {
            return this.selection.tablePrefix + row.tableName;
        }
    }
}
</script>

<style>
</style>
